<template>
	<view class="wrap">
		<view class="top_box flex_ss">
			<view class="img_box" v-if="info.prize&&info.prize.image" @click="$util.previewImageFun([info.prize.image])">
				<image :src="info.prize.image" mode="aspectFill"></image>
			</view>
			<view class="info_box">
				<view  class="text title flex_s">
					<text v-if="info.prize">{{info.prize.name}}</text>
					<view class="copy_icon" v-if="info.status==1&&info.type==3&&info.code" @click="$util.copyHandle(info.code)">
						<image src="../../static/imgs/copy.png" mode="aspectFill"></image>
					</view>
				</view>
				
				<template v-if="info.type==3">
					<template v-if="info.status==1">
						<view  class="text">{{info.code}}</view>
					</template>
					<view  class="text" v-else>**************</view>
				</template>
				
				<view  class="btn">
					<text v-if="info.status==0">待审核</text>
					<text v-else-if="info.status==1">已通过</text>
					<text v-else>已驳回</text>
				</view>
			</view>
		</view>
		
		<view class="main" >
			<view class="card_box" v-if="info.status==-1&&info.mark">
				<text class="text1">驳回原因</text>
				<text>{{info.mark}}</text>
			</view>
			<view class="rich_box_out" v-if="info.prize&&info.prize.content">
				<view class="title flex_s">
					兌換流程
				</view>
				<view class="rich_box">
					<rich-text :nodes="info.prize.content"></rich-text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {record_info} from "@/api/info.js"
	export default {
		data() {
			return {
				info:{}
			};
		},
		onLoad(option) {
			if(option.id){
				this.get_record_info(option.id)
			}
		},
		methods:{
			get_record_info(id){
				record_info({id:id}).then((res)=>{
					this.info=res.data[0]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	.card_box {
		width: 710rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		overflow: hidden;
		background: #fff;
		margin-bottom: 20rpx;
		padding: 30rpx;
		font-size: 30rpx;
		.text1{
			margin-right: 20rpx;
		}
	}
	.main{
		margin-top: -130rpx;
		.rich_box_out{
			width: 713rpx;
			margin: 0 auto;
			border-radius: 16rpx;
			background: #FFFFFF;
			min-height: 500rpx;
			
		}
		.rich_box {
			padding: 0 24rpx;
		}
		.title{
			position: relative;
			height: 100rpx;
			padding-left: 50rpx;
			font-size: 30rpx;
			color: #292929;
			&::before{
				content: "";
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 28rpx;
				width: 4rpx;
				height: 28rpx;
				background: #FFCB05;
			}
		}
	}
	.top_box{
		height: 390rpx;
		width: 100%;
		padding-top: 66rpx;
		padding-left: 30rpx;
		background-image: url('../../static/imgs/record.png');
		/* 背景图像 */
		background-repeat: no-repeat;
		/* 不重复 */
		background-position: center center;
		/* 居中 */
		background-size: cover;
		/* 覆盖整个元素 */
		.img_box{
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.info_box{
			.text{
				font-size: 30rpx;
				color: #292929;
				line-height: 40rpx;
			}
			.title{
				margin-bottom: 20rpx;
				.copy_icon{
					width: 30rpx;
					height: 30rpx;
					margin-left: 24rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.btn{
				width: 127rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				border-radius: 22rpx;
				background: #FF4E26;
				color: #fff;
				font-size: 24rpx;
			}
		}
	}
}
</style>
